/*----------------------------------------*\
  BTN
\*----------------------------------------*/

/* TYPES */
.btn {
  @apply inline-flex items-center;
  @apply px-4;
  @apply leading-tight;
  @apply no-underline; /* override general styling for links in main */
  @apply rounded-sm;
  @apply focus:outline-none;
}

.btn--outline {
  @apply text-primary-600 font-normal;
  @apply border border-primary-600;
  @apply hover:text-primary-700 hover:border-primary-700;
  @apply focus:text-primary-600 focus:border-primary-600;

  &:disabled {
    @apply text-secondary-300;
    @apply border-secondary-200;
  }
}

.btn--bare {
  @apply px-2;
  @apply text-secondary-800 font-normal;
  @apply hover:text-primary-600;

  &:disabled {
    @apply text-secondary-300;
    @apply bg-transparent;
  }
}

.btn--link {
  @apply pr-2 pl-0;
  @apply text-primary-600 font-normal;
  @apply hover:text-primary-700;

  .btn__icon {
    @apply w-8;
    @apply stroke-0 md:stroke-[0.05px] lg:stroke-[0.1px];
    @apply fill-current stroke-current;
  }

  &:disabled {
    @apply text-secondary-300;
    @apply bg-transparent;
  }
}

.btn--link-negative {
  @apply pr-2 pl-0;
  @apply text-white font-normal underline underline-offset-2;
  @apply hover:text-secondary-100;
  @apply focus:text-white;

  .btn__icon {
    @apply w-8;
    @apply stroke-0 md:stroke-[0.05px] lg:stroke-[0.1px];
    @apply fill-current stroke-current;
  }

  &:disabled {
    @apply text-secondary-200;
    @apply bg-transparent;
  }
}

.btn--filled {
  @apply text-white font-bold;
  @apply bg-secondary-500;
  @apply border border-secondary-500;
  @apply hover:text-secondary-100;
  @apply focus:text-white;

  &:disabled {
    @apply text-white;
    @apply bg-secondary-200;
    @apply border-secondary-200;
  }
}

.btn--outline-negative {
  @apply text-white font-bold;
  @apply bg-secondary-500;
  @apply border border-white;
  @apply hover:text-secondary-100 hover:border-secondary-100;
  @apply focus:text-white focus:border-white;

  &:disabled {
    @apply text-secondary-200;
    @apply border-secondary-300;
    @apply bg-transparent;
  }
}

.btn--bare-negative {
  @apply text-white;
  @apply hover:text-secondary-100;
  @apply focus:text-white;

  &:disabled {
    @apply text-secondary-200;
  }
}

/* SIZES */
.btn,
.btn--base {
  @apply min-h-[44px] xl:min-h-[48px] 3xl:min-h-[52px];
  @apply text--base;
  @apply leading-5 lg:leading-6;
}

.btn--sm {
  @apply min-h-[34px] xl:min-h-[40px] 3xl:min-h-[44px];
  @apply text--sm;
  @apply leading-4 lg:leading-5;
}

.btn--lg {
  @apply min-h-[48px] xl:min-h-[52px] 3xl:min-h-[56px];
  @apply text--lg;
  @apply leading-6;
}

/* TEXT */

.btn__text {
  @apply py-2 text-left;
  /* Line break for all strings, no hypenation due to links not being hyphenated when using hyphens-auto */
  @apply break-all;
}

.btn__text-centered {
  @apply py-2 text-center w-full;
  /* Line break for all strings, no hypenation due to links not being hyphenated when using hyphens-auto */
  @apply break-all;
}

/* ICONS */

.btn__icon {
  @apply w-[1.4em] h-full;
  @apply stroke-[0.3px] md:stroke-[0.35px] lg:stroke-[0.4px];
  @apply stroke-current;
  @apply transition-transform duration-200;
}

.btn--icon-none {
  .btn__icon {
    @apply hidden;
  }
}

.btn--icon-only {
  @apply px-[0.625em];

  .btn__text {
    @apply sr-only;
  }
}

.btn--icon-left {
  .btn__icon {
    @apply relative mr-[0.2em] right-[0.1em];
  }
}

.btn--icon-right {
  flex-direction: row-reverse;

  .btn__icon {
    @apply relative ml-[0.2em] left-[0.1em];
  }
}

.btn--icon-180 {
  .btn__icon {
    @apply rotate-180;
  }
}

.btn--back {
  @apply float-left;
  @apply mt-[0.4em] lg:mt-1;
}

.btn--full-width {
  @apply w-full;
}
